import React, { Component, createRef } from 'react'

export default class App extends Component {
  inputRef = createRef()
  state = {
    flag: false,
  }
  render() {
    const { flag } = this.state
    return (
      <div>
        <h1>组件通讯</h1>
        {flag ? (
          <input ref={this.inputRef} type="text" placeholder="请输入内容" />
        ) : (
          <button onClick={this.handleClick}>回复</button>
        )}
      </div>
    )
  }
  //handleClick
  handleClick = async () => {
    // console.log(this.inputRef.current)
    await this.setState(
      {
        flag: true,
      }
      // 解决办法
      //   ,
      //   () => this.inputRef.current.focus()
    )
    // 聚焦
    // 这里是因为 在react 中setState() 方法是异步的 所以先执行下面的代码
    // 当执行如下代码的时候 input dom还没获取到所以 会报错
    // this.inputRef.current.focus()

    // 如果定义一个 定时器 那么 setState() 就是同步的方法了
    // 2.或者使用 async await 解决
    this.inputRef.current.focus()
  }
}
